<template>
  <div>
    <Breadcrumb :style="{margin: '16px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem to="/department">部门管理</BreadcrumbItem>
      <BreadcrumbItem>部门列表</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <div style="min-height: 600px">
        <Row>
          <Col span="18" offset="3">
            <Button type="primary" size="large" style="margin-bottom: 15px;" to="/department/add">添加部门</Button>
            <div class="dept-tree">
              <div class="dept-header">
                <h4>部门名称</h4>
                <div>
                  <h4 style="margin-right:80px;">主管</h4>
                  <h4 style="width:90px;">人员数量</h4>
                  <h4 style="width:140px;text-align:center;">操作</h4>
                </div>
              </div>
              <Tree :data="deptTree" @on-select-change="checkChange" :render="deptRender"></Tree>
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      deptTree: []
    }
  },
  methods: {
    deptRender(h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%',
          borderBottom: '1px solid #ddd'
        }
      }, [
        h('span', {
          style: {
            fontSize: '14px',
            marginLeft: '8px'
          }
        }, data.title),
        h('span', {
          style: {
            float: 'right',
            display: 'inline-block'
          }
        }, [
          h('span', {
            style: {
              fontSize: '14px',
              marginRight: '100px'
            }
          }, data.leadName),
          h('span', {
            style: {
              fontSize: '14px',
              display: 'inline-block',
              width: '90px'
            }
          }, data.userCount),
          h('span', {
            style: {
              display: 'inline-block',
              width: '140px',
              textAlign: 'center'
            }
          },[
            h('Button', {
              props: {
                type: 'primary',
                to: '/department/edit?deptid=' + data.id + '&deptname=' + data.title + '&leaid=' + data.leadId + '&level=' + data.level
              }
            }, '编辑'),
            h('Button', {
              style: {
                marginLeft: '15px',
                // display: data.userCount == 0 ? '' : 'none'
              },
              props: {
                type: 'error',
                disabled: data.userCount == 0 ? false : true
              },
              on: {
                click: () => {
                  this.$options.methods.deleteDepartment(data.id, this)
                }
              }
            }, '删除')
          ])
        ])
      ])
    },
    checkChange(n, m) {
      console.log(m)
      this.pid = m.id
      this.plevel = m.level
    },
    getList(_this) {
      _this.$axios.get('/bm/opera/dept/findAllDeptTree').then(res => {
        if (res.data.code == 200) {
          _this.deptTree = formatTree(res.data.detail)
        } else {
          _this.$Message.error(res.data.description)
        }
      }).catch(err => {
        _this.$Message.error('网络错误，请稍后重试！')
      })
    },
    deleteDepartment(id, _this) {
      _this.$axios.post('/bm/opera/dept/delDept', qs.stringify({
        deptId: id
      })).then(res => {
        if (res.data.code == 200) {
          _this.$Message.success('部门已删除！')
          _this.$options.methods.getList(_this)
        } else {
          _this.$Message.error(res.data.description)
        }
      })
    }
  },
  mounted() {
    this.$options.methods.getList(this)
  }
}
function formatTree(subdata) {
  let arr = [];
  subdata.forEach((item, index) => {
    let subarr = {};
    subarr = {
      title: item.deptName,
      id: item.id,
      userCount: item.userCount,
      pid: item.pid,
      level: item.level,
      leadName: item.leadName,
      leadId: item.leadId,
      expand: true
    };

    if (item.sonDeptList.length > 0) {
      subarr.children = formatTree(item.sonDeptList);
    }

    arr.push(subarr);
  });

  return arr;
}
</script>

<style lang="less" scoped>
.dept-header {
  margin: 10px 0 20px;
  padding-right: 10px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  position: relative;
  left: 10px;

  h4 {
    font-size: 14px;
    display: inline-block;
  }

  div {
    float: right;
    // display: inline-block;
  }
}
</style>
